$g_radius:4px;

$theme_dark: (
  // 主题背景色
  app_background: #222755,
  app_header: linear-gradient(90deg, #7c1398, #0079aa),
  app_side: linear-gradient(#323973,#1a1d3c),
  app_footer: #1a1d3f,
  app_view: none,
  app_header_font: #ffffff,

  //
  avatar : linear-gradient(90deg, #7c1398, #0079aa),
  border: #424875,
  font: white,
  shadow: transparent,
  radius: $g_radius,

  primary: #97cbff,

  bg_base : #2e3460,
  bg_secondary : #353b67,
);

$theme_light: (
  app_background : linear-gradient(135deg,#f8f8f8,#e5e5e5),
  app_header: white,
  app_side: white,
  app_footer: #f0f0f0,
  app_view: #f9fafb,
  app_header_font: rgb(115 ,115 ,115),

  avatar : linear-gradient(90deg, #4883d1, #3473c5),
  border: rgb(240, 240, 240),
  font: rgb(115 ,115 ,115),
  shadow: rgb(226, 226, 226),
  radius: $g_radius,

  primary: #008cff,
  bg_base : rgb(255, 255, 255),
  bg_secondary : rgb(250, 250, 250),
);

$themes: (
  dark: $theme_dark,
  light: $theme_light,
);

@function theme($key) {
  @return map-get($theme-map, $key);
}

@mixin themeify {
  @each $theme-name, $theme-map in $themes {
    $theme-map: $theme-map !global;
    [data-theme="#{$theme-name}"] & {
      @content;
    }
  }
}
